<template>
  <view class="container">
    <view class="form-container">
      <!-- 切换按钮 -->
      <view class="switch-container">
        <view
          :class="['switch-item', isLogin ? 'active' : '']"
          @click="switchMode(true)"
          >登录</view
        >
        <view
          :class="['switch-item', !isLogin ? 'active' : '']"
          @click="switchMode(false)"
          >注册</view
        >
      </view>

      <!-- 登录表单 -->
      <view v-if="isLogin" class="form-content">
        <view class="input-group">
          <input
            type="text"
            v-model="loginForm.username"
            placeholder="请输入用户名"
            class="input-field"
          />
        </view>
        <view class="input-group">
          <input
            type="password"
            v-model="loginForm.password"
            placeholder="请输入密码"
            class="input-field"
          />
        </view>
        <view class="forgot-password">
          <text @click="handleForgotPassword">忘记密码？</text>
        </view>
        <button class="submit-btn" @click="handleLogin">登录</button>
      </view>

      <!-- 注册表单 -->
      <view v-else class="form-content">
        <view class="input-group">
          <input
            type="text"
            v-model="registerForm.username"
            placeholder="请输入用户名"
            class="input-field"
          />
        </view>
        <view class="input-group">
          <input
            type="password"
            v-model="registerForm.password"
            placeholder="请输入密码"
            class="input-field"
          />
        </view>
        <view class="input-group">
          <input
            type="password"
            v-model="registerForm.confirmPassword"
            placeholder="请确认密码"
            class="input-field"
          />
        </view>
        <button class="submit-btn" @click="handleRegister">注册</button>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from "vue";

// 登录/注册模式切换
const isLogin = ref(true);

// 登录表单数据
const loginForm = ref({
  username: "",
  password: "",
});

// 注册表单数据
const registerForm = ref({
  username: "",
  password: "",
  confirmPassword: "",
});

// 切换登录/注册模式
const switchMode = (mode) => {
  isLogin.value = mode;
};

// 处理登录
const handleLogin = () => {
  // TODO: 实现登录逻辑
  if (!loginForm.value.username || !loginForm.value.password) {
    uni.showToast({
      title: "请填写完整信息",
      icon: "none",
    });
    return;
  }
  uni.switchTab({
    url: "/pages/home/index",
  });

  console.log("登录信息：", loginForm.value);
};

// 处理注册
const handleRegister = () => {
  // TODO: 实现注册逻辑
  if (
    !registerForm.value.username ||
    !registerForm.value.password ||
    !registerForm.value.confirmPassword
  ) {
    uni.showToast({
      title: "请填写完整信息",
      icon: "none",
    });
    return;
  }

  if (registerForm.value.password !== registerForm.value.confirmPassword) {
    uni.showToast({
      title: "两次输入的密码不一致",
      icon: "none",
    });
    return;
  }

  console.log("注册信息：", registerForm.value);
};

// 处理忘记密码
const handleForgotPassword = () => {
  uni.showToast({
    title: "功能开发中",
    icon: "none",
  });
};
</script>

<style scoped lang="less">
page {
  height: 100%;
  overflow: hidden;
}

.container {
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  // 设置背景颜色，使用线性渐变，角度为135度，颜色从#667eea到#764ba2
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
  padding: 20rpx;
}

// 设置表单容器样式
// 表单容器样式
.form-container {
  // 宽度设置为100%
  width: 100%;
  // 最大宽度设置为600rpx
  max-width: 600rpx;
  // 背景颜色为白色，透明度为0.95
  background: rgba(255, 255, 255, 0.95);
  // 圆角设置为20rpx
  border-radius: 20rpx;
  // 内边距设置为40rpx
  padding: 40rpx;
  // 盒子阴影设置为8rpx 32rpx，颜色为黑色，透明度为0.1
  box-shadow: 0 8rpx 32rpx rgba(0, 0, 0, 0.1);
}

.switch-container {
  display: flex;
  margin-bottom: 40rpx;
  border-radius: 10rpx;
  overflow: hidden;
  background: #f5f5f5;
}

.switch-item {
  flex: 1;
  text-align: center;
  padding: 20rpx 0;
  font-size: 32rpx;
  color: #666;
  transition: all 0.3s;
}

.switch-item.active {
  background: #667eea;
  color: #fff;
}

.form-content {
  margin-top: 30rpx;
}

.input-group {
  margin-bottom: 30rpx;
}

.input-field {
  width: 100%;
  height: 80rpx;
  padding: 0 20rpx;
  font-size: 28rpx;
  border: 2rpx solid #e0e0e0;
  border-radius: 10rpx;
  box-sizing: border-box;
  transition: all 0.3s;
}

.input-field:focus {
  border-color: #667eea;
}

.forgot-password {
  text-align: right;
  margin-bottom: 30rpx;
}

.forgot-password text {
  color: #667eea;
  font-size: 26rpx;
}

.submit-btn {
  width: 100%;
  height: 80rpx;
  line-height: 80rpx;
  background: #667eea;
  color: #fff;
  font-size: 32rpx;
  border-radius: 10rpx;
  border: none;
  transition: all 0.3s;
}

.submit-btn:active {
  background: #764ba2;
}
</style>